<template>
  <div>
    <nav class="aui-navbar"
         :class="`aui-navbar--${$store.state.navbarLayoutType}`">
      <div class="aui-navbar__header">
        <h1 class="aui-navbar__brand"
            @click="$router.push({ name: 'home' })">
          <!--<a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>-->
          <!-- <img class="aui-navbar__brand-lg"
               style="width:180px;height:70px;margin:0 auto;"
               src="@/assets/img/kaijin_logo.png"
               alt=""> -->
          <img class="aui-navbar__brand-lg"
               style="width:180px;height:70px;margin:0 auto;"
               :src="str.logo"
               alt="">
          <!-- <span class="aui-navbar__brand-mini">凯金</span> -->
          <span class="aui-navbar__brand-mini">{{ str.title }}</span>
        </h1>
      </div>
      <div class="aui-navbar__body">
        <el-menu class="aui-navbar__menu mr-auto"
                 mode="horizontal">
          <!-- 侧边栏伸缩按钮 -->
          <el-menu-item index="1"
                        @click="sidebarFold">
            <div class="icon-menu-box"></div>
            <svg class="
                icon-svg
                aui-navbar__icon-menu aui-navbar__icon-menu--switch
              "
                 style="color: #fff"
                 aria-hidden="true">
              <use xlink:href="#icon-outdent"></use>
            </svg>
          </el-menu-item>
        </el-menu>
        <!-- 左箭头 -->
        <i class="el-icon-arrow-left arrow"
           @click="moveLeft"></i>
        <!-- 栏目列表 -->
        <div class="menu mr-auto"
             ref="menuBox">
          <div class="menu-list"
               :style="`transform: translateX(${move}px)`"
               ref="menuList">
            <div v-for="item of headerMenuList"
                 :key="item.id"
                 ref="menuItem"
                 @click="setSidebarMenu(item)"
                 :class="[
                   activeHeaderMenu === item.id
                     ? 'active-menu theme-header-menu-active'
                     : '',
                   'menu-item theme-header-menu',
                 ]">
              {{ item.name }}
            </div>
          </div>
        </div>
        <!-- 右箭头 -->
        <i class="el-icon-arrow-right arrow"
           @click="moveRight"></i>
        <!-- <template>
          <el-button class="index leftBtn"
                     round
                     :style="selectIndex == -1?'':'background-color:#3A9CFF;border: none;opacity:0.8'"
                     @click.native="selectClick('-1')">
            <img v-if="selectIndex == '-1'"
                 width="72px"
                 height="27px"
                 src="@/assets/img/index.png">
            <img v-else
                 width="72px"
                 height="27px"
                 src="@/assets/img/indexun.png">
          </el-button>
          <el-button icon="el-icon-arrow-left"
                     circle
                     class="Btn leftBtn"
                     @click="left"></el-button>
          <div id="father"
               style="width:62%;margin:0 auto;margin-left: 220px;"
               class="grid-content bg-purple">
            <div id="swiper-box"
                 class="swiper-box"
                 :style="{transform:'translateX('+currentOffset+'px)'}">
              <el-card v-for="(item,index) in currentAppMenu"
                       :key="item.id"
                       shadow="none"
                       @click.native="selectClick(index)"
                       :class="{active:selectIndex==index}">
                <div class="backColor">
                  <div class="titleBox">
                    <img v-if="selectIndex==index"
                         :src="item.iconUnSrc" />
                    <img v-else
                         :src="item.iconSrc" />
                    &nbsp;&nbsp;{{item.name}}
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <el-button icon="el-icon-arrow-right"
                     circle
                     class="rightBtn"
                     @click="right"></el-button>
        </template> -->
        <el-badge v-for="item in list"
                  :key="item.num"
                  :value="item.num"
                  class="item">
          <el-button type="text"
                     size="small"
                     @click="numbeofmessages()"
                     class="el-icon-message-solid"></el-button>
        </el-badge>
        <el-menu mode="horizontal"
                 class="aui-navbar__menu">
          <!-- 刷新页面 -->
          <el-menu-item index="2"
                        @click="refresh()">
            <svg class="
                icon-svg
                aui-navbar__icon-menu aui-navbar__icon-menu--refresh
              "
                 aria-hidden="true"
                 style="color: #fff">
              <use xlink:href="#icon-sync"></use>
            </svg>
            <span class="el-dropdown">刷新页面</span>
          </el-menu-item>
          <el-menu-item index="4"
                        v-if="isShowFullScreenBtn"
                        @click="fullscreenHandle()">
            <svg class="icon-svg aui-navbar__icon-menu"
                 aria-hidden="true">
              <use style="color:#fff;"
                   xlink:href="#icon-fullscreen"></use>
            </svg>
            <span class="el-dropdown">全屏</span>
          </el-menu-item>
          <!-- 中英文切换 -->
          <!-- <el-menu-item index="1">
            <el-dropdown placement="bottom"
                         :show-timeout="0">
              <el-button size="mini">{{ $t('_lang') }}</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(val, key) in i18nMessages"
                                  :key="key"
                                  @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item> -->
          <el-menu-item index="4"
                        class="aui-navbar__avatar">
            <el-dropdown placement="bottom"
                         :show-timeout="0">
              <span class="el-dropdown-link"><img style="width: 40px; height: 40px; line-height: 84px"
                     src="@/assets/img/touxiang.png"
                     alt="" />
                <span>{{ $store.state.user.name }}</span>
                <i class="el-icon-arrow-down"
                   style="color: #fff"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="logoutHandle()">{{
                  $t("logout")
                }}</el-dropdown-item>
                <el-dropdown-item @click.native="onChangePasswordClick">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="setThemes">设置主题</el-dropdown-item>
                <el-dropdown-item @click.native="myWallet">我的钱包</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 弹窗, 修改密码 -->
      <update-password v-if="updatePassowrdVisible"
                       ref="updatePassowrd"></update-password>
      <!-- 我的钱包 -->
      <my-wallet ref="myWallet"></my-wallet>
    </nav>
    <!-- <el-dialog :visible.sync="dialogVisible"
               class="dialog"
               :lock-scroll='true'
               :show-close="true"
               :fullscreen="true"
               width="100%">
      <div class='dialog-close align-right'
           v-show="isClose">
        <el-button type="text"
                   icon="el-icon-close"></el-button>
      </div>
      <div @dblclick="clickClose">
        <device-voice />
      </div>
    </el-dialog> -->
    <theme ref="theme" />
    <mainSidebar v-show="false"
                 ref="Sidebar" />
    <mainContent v-show="false"
                 ref="Content" />
  </div>
</template>

<script>
/* eslint-disable */
import { messages } from "@/i18n";
import screenfull from "screenfull";
import theme from "./theme";
import mixinViewModule from "@/mixins/view-module";
import UpdatePassword from "./main-navbar-update-password";
import myWallet from "./my-wallet.vue";
import mainSidebar from "./main-sidebar.vue";
import mainContent from "./main-content.vue";
import { clearLoginInfo } from "@/utils";
import { mapMutations, mapState } from "vuex";
export default {
  mixins: [mixinViewModule],
  inject: ["refresh"],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/tb/news/getNum", // 数据列表接口，API地址
      },
      mode: "light",
      isreien: "0",
      list: [],
      str: {},
      isClose: false,
      dialogVisible: false,
      i18nMessages: messages,
      updatePassowrdVisible: false,
      headerMenuList: [],
      move: 0,
      activeIndex: 0,
      isActive: false,
      selectIndex: -1,
      currentAppMenu: [
        {
          id: 4,
          name: "会务管理系统",
          iconSrc: require("@/assets/img/icon1.png"),
          iconUnSrc: require("@/assets/img/icon1-1.png"),
        },
        {
          id: 1,
          name: "宿舍管理系统",
          iconSrc: require("@/assets/img/icon4.png"),
          iconUnSrc: require("@/assets/img/icon4-1.png"),
        },
        {
          id: 7,
          name: "访客管理系统",
          iconSrc: require("@/assets/img/icon5.png"),
          iconUnSrc: require("@/assets/img/icon5-1.png"),
        },
        {
          id: 2,
          name: "智慧路灯系统",
          iconSrc: require("@/assets/img/icon6.png"),
          iconUnSrc: require("@/assets/img/icon6-1.png"),
        },
        {
          id: 3,
          name: "多媒体管理系统",
          iconSrc: require("@/assets/img/icon7.png"),
          iconUnSrc: require("@/assets/img/icon7-1.png"),
        },
        {
          id: 5,
          name: "餐饮管理系统",
          iconSrc: require("@/assets/img/icon8.png"),
          iconUnSrc: require("@/assets/img/icon8-1.png"),
        },
        {
          id: 6,
          name: "能耗管理系统",
          iconSrc: require("@/assets/img/icon9.png"),
          iconUnSrc: require("@/assets/img/icon9-1.png"),
        },
        {
          id: 0,
          name: "集成管理系统",
          iconSrc: require("@/assets/img/icon3.png"),
          iconUnSrc: require("@/assets/img/icon3-1.png"),
        },
      ],
      currentAppMenu1: [
        { id: 2, name: "会务管理系统" },
        { id: 3, name: "车辆管理系统" },
        { id: 4, name: "安防联动系统" },
        { id: 5, name: "宿舍管理系统" },
        { id: 6, name: "访客管理系统" },
        { id: 7, name: "智慧路灯系统" },
        { id: 8, name: "多媒体管理系统" },
        { id: 9, name: "餐饮管理系统" },
        { id: 10, name: "能耗管理系统" },
        { id: 11, name: "危化学物房监测管理系统" },
        { id: 12, name: "图书室管理系统" },
        { id: 13, name: "健身房管理系统" },
      ],
      currentOffset: 0,
      fatherWith: 0,
      box: "", // dom
    };
  },
  computed: {
    // ...mapState({
    //   refresheChar: state => state.refresheChar,
    //   refresheCharList: state => state.refresheCharList,
    //   isConsole: state => state.isConsole,
    //   isShowFullScreenBtn: state => {
    //     return state.fullScreen.isShowFullScreenBtn
    //   }
    // })
    ...mapState({
      activeHeaderMenu: (state) => state.activeHeaderMenu,
      isShowFullScreenBtn: (state) => {
        return state.fullScreen.isShowFullScreenBtn;
      },
      refresheChar: (state) => state.refresheChar,
      refresheCharList: (state) => state.refresheCharList,
      isConsole: (state) => state.isConsole,
    }),
  },
  components: {
    UpdatePassword,
    theme,
    myWallet,
    mainSidebar,
    mainContent
  },
  mounted () {
    this.temporary();
    this.getLogo()
    // this.setCardWidth()
    // this.box = document.querySelector('#swiper-box')
    // window.addEventListener('resize', () => {
    //   this.currentOffset = 0
    //   this.setCardWidth()
    // })
    // window.addEventListener('resize', this.monitorFullScreen)
    this.isreien = localStorage["isRuiEn"];
    window.addEventListener("resize", this.monitorFullScreen);
    this.headerMenuList.splice(
      0,
      this.headerMenuList.length,
      ...window.SITE_CONFIG["headerMenuList"]
    );
    this.setSidebarMenu(this.headerMenuList[0]);
    var that = this
    this.$bus.$on('On_Navbar_RecTcpMessage', function () {
      that.temporary()
    })
  },
  beforeDestroy () {
    this.$bus.$off('On_Navbar_RecTcpMessage')
  },
  methods: {
    async temporary () {
      this.list = await this.getDataList({
        url: this.mixinViewModuleOptions.getDataListURL,
      });
      this.list = this.list.data.data;
    },
    numbeofmessages () {
      this.$router.push("/message-list");
    },
    ...mapMutations([
      "setTheme",
      "setIsFullScreen",
      "setSidebarMenuList",
      "setActiveHeaderMenu",
    ]),
    // selectClick (index) {
    //   console.log(index)
    //   this.selectIndex = index
    //   this.isActive = true
    // },
    // setCardWidth () {
    //   const father = document.querySelector('#father')
    //   this.fatherWith = father.clientWidth - 150
    //   this.width = ((this.fatherWith - 20) / 5) + 'px'
    // },

    // right () {
    //   if (this.currentOffset < (-(this.fatherWith))) return // 所有栏目
    //   if (this.currentOffset < (-(this.fatherWith - 200))) return // 8个栏目
    //   this.currentOffset -= ((this.fatherWith - 20))
    // },
    // left () {
    //   if (this.currentOffset >= -2) return
    //   this.currentOffset += ((this.fatherWith - 20))
    // },
    // 左移
    moveLeft () {
      let move = this.move;
      move += this.$refs.menuItem[this.activeIndex - 1].offsetWidth;
      if (move >= 0) {
        this.move = 0;
        this.activeIndex = 0;
      } else {
        this.move = move;
        this.activeIndex--;
      }
    },
    // 右移
    moveRight () {
      const menuBoxWith = this.$refs.menuBox.offsetWidth;
      const menuListWith = this.$refs.menuList.offsetWidth;
      if (menuBoxWith >= menuListWith) {
        return;
      }

      let move = this.move;
      const width = this.$refs.menuItem[this.activeIndex].offsetWidth;
      move -= width;
      if (Math.abs(move) >= menuListWith - width) {
        this.move = move + width;
      } else {
        this.move = move;
        this.activeIndex++;
      }
    },
    // 切换左侧菜单
    setSidebarMenu (item) {
      this.setActiveHeaderMenu(item.id);
      // 没有子级的就直接跳转页面
      if (item.id !== "-1" && !item.children.length) {
        this.gotoRouteHandle(item);
        return;
      }

      if (item.id === "-1") {
        this.setSidebarMenuList([...window.SITE_CONFIG["allNativeMenuList"]]);
      } else {
        this.setSidebarMenuList([
          ...window.SITE_CONFIG["allMenuList"][item.id],
        ]);
      }
      this.$refs.Sidebar.setheaderMenuName(item.name)
      this.$refs.Content.setheaderMenuName(item.name)
      this.$emit('setheaderMenuName', item.name)
      if (item.name == '主页') {
        this.$refs.Content.gotoHome()
      }
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle (menu) {
      localStorage.removeItem('img')
      localStorage.removeItem('menuId')
      // localStorage.removeItem('http')
      // localStorage.removeItem('singleSign')
      if (menu.httpAddress !== '' && menu.httpAddress !== null) {
        // let http = menu.httpAddress + menu.urlParam
        // localStorage['http'] = http
        // localStorage['singleSign'] = menu.singleSign
        localStorage['menuId'] = menu.id
        // window.open(http)
        // this.$router.push({path:'/external-link',query: {http: http,singleSign: menu.singleSign}})
        this.$router.push({ path: '/external-link', query: { menuId: menu.id } })
      }
      if (menu.imgAddress !== '' && menu.imgAddress !== null) {
        let img = menu.imgAddress
        localStorage['img'] = img
        // this.$router.push({ name: 'picture', params: { img: img } })
        this.$router.push({ path: '/picture', query: { img: img } })
      }
      const menuId = menu.id;
      let route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
        (item) => item.meta.menuId === menuId
      )[0];
      if (route) {
        this.$router.push({ name: route.name });
      }
      this.refresh();
    },
    // 全屏
    fullscreenHandle () {
      if (!screenfull.isFullscreen) {
        // 全屏
        this.dialogVisible = true;
        this.setIsFullScreen(true);
        screenfull.toggle();
      } else {
        screenfull.exit();
        this.setIsFullScreen(false);
      }
    },
    // 关闭全屏
    beforeClose () {
      this.setIsFullScreen(false);
      screenfull.exit();
    },
    // 监听是否为全屏状态
    monitorFullScreen () {
      if (screenfull.isEnabled) {
        screenfull.on("change", () => {
          if (!screenfull.isFullscreen) {
            this.beforeClose();
          }
        });
      }
    },
    // 打开主题页面
    setThemes () {
      this.$nextTick(() => {
        this.$refs.theme.init();
      });
    },
    // 设置模式
    setMode (val) {
      this.mode = val;
      this.setTheme(val);
      localStorage.setItem("mode", val);
      // location.reload()
    },
    clickClose (event) {
      if (!this.isClose) {
        this.isClose = true;
      } else {
        this.isClose = false;
      }
    },
    // 回到起始页
    backIndex () {
      window.location.reload();
    },
    // 侧边栏收缩
    sidebarFold () {
      let self = this;
      this.$store.state.sidebarFold = !this.$store.state.sidebarFold;
      this.$nextTick(function () {
        // 重新刷新图表
        setTimeout(() => {
          if (self.refresheChar) {
            for (const key in self.refresheCharList) {
              if (self.refresheCharList.hasOwnProperty(key)) {
                const element = self.refresheCharList[key];
                if (element.echarts) {
                  element.echarts.resize();
                }
              }
            }
          }
        }, 250);
      });
    },
    // 修改密码
    updatePasswordHandle () {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 退出
    logoutHandle () {
      this.$confirm(
        this.$t("prompt.info", { handle: this.$t("logout") }),
        this.$t("prompt.title"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.$http
            .put("/loginOut")
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              clearLoginInfo();
              if (this.isreien === "1") {
                this.$router.push({ name: "login1" });
              } else {
                this.$router.push({ name: "login" });
              }
            })
            .catch(() => { });
        })
        .catch(() => { });
    },
    onChangePasswordClick () {
      this.updatePasswordHandle();
    },
    myWallet () {
      this.$nextTick(() => {
        this.$refs.myWallet.init();
      });
    },
    async getLogo () {
      this.str = {
        logo: require('@/assets/img/ruien1.png'),
        title: '瑞恩'
      }
      await this.$http.get('/tb/LogoSettingController/getLogo').then(({data:res}) => {
        if (res.code !== 0) {
          return
        }
        this.str.logo = res.data.homeLogo
        this.str.title = res.data.homeLogoName
      })
    }
    // getLogo () {
    //   let str = {
    //     logo: '',
    //     title: ''
    //   }
    //   if (process.env.VUE_APP_LOGO === 'kaijin') {
    //     str.logo = require('@/assets/img/kaijin_logo.png')
    //     str.title = '凯金'
    //   } else if (process.env.VUE_APP_LOGO === 'ruien') {
    //     str.logo = require('@/assets/img/ruien1.png')
    //     // str.logo = require('@/assets/img/'+ process.env.VUE_APP_LOGO +'1.png')
    //     str.title = '瑞恩'
    //     // str.title = process.env.VUE_APP_TITLE
    //   }
    //   return str
    // }
  },
};
</script>
<style lang="scss" scoped>
// .aui-navbar__brand {
//   justify-content: flex-start;
//   .aui-navbar__brand-mini,
//   .aui-navbar__brand-lg {
//     width: 28%;
//     font-size: 16px;
//   }
//   .aui-navbar__brand-mini {
//     width: 100%;
//   }
// }
// .icon-svg {
//   margin-right: 5px;
// }
// .icon-menu-box {
//   position: absolute;
//   left: -15px;
//   top: 11px;
//   padding-left: 15px;
//   height: 30px;
//   // background-color: rgba(108, 166, 255, 0.5);
//   width: 53px;
//   border-radius: 0 5px 5px 0;
// }
// .aui-navbar__icon-menu--switch {
//   z-index: 1;
//   position: relative;
//   color: #717171 !important;
//   font-size: 20px !important;
// }
.aui-navbar__header {
  background: url("~@/assets/img/nav_left.png") no-repeat;
}

.aui-navbar__body {
  background-size: cover !important;
  background: url("~@/assets/img/nav_right.png") no-repeat;
}

// .bg-purple {
//   overflow: hidden;
//   position: relative;
//   padding-left: 10px;
// }
// .swiper-box {
//   display: -webkit-box;
//   width: auto;
//   transition: all 0.2s;
//   font-size: 18px;
//   font-weight: bold;
// }
// .el-card {
//   color: #fff;
//   background-color: transparent;
//   height: 40px;
//   line-height: 40px;
//   border: none;
//   margin-top: 22px;
//   padding-right: 20px;
//   padding-left: 20px;
//   border-radius: 60px;
// }
// ::deep.el-card {
//   padding-right: 20px;
//   padding-left: 20px;
//   padding-top: 0px;
//   padding-bottom: 0px;
// }
// ::deep.el-card__body {
//   padding-right: 0px;
//   padding-left: 0px;
//   padding-top: 0px;
//   padding-bottom: 0px;
// }
// ::deep.el-button.is-round {
//   border-radius: 20px;
// }
// ::deep.active {
//   background-color: #fff;
//   color: #717171 !important;
// }
// .leftBtn {
//   height: 38px;
//   width: 38px;
//   position: absolute;
//   top: 50%;
//   left: 1%;
//   transform: translateY(-50%);
// }
// .rightBtn {
//   height: 38px;
//   width: 38px;
//   position: absolute;
//   top: 50%;
//   right: 18%;
//   transform: translateY(-50%);
// }
// .backColor {
//   display: table;
//   height: 40px;
//   background: transparent;
//   border-radius: 20px;
//   margin: 0 auto;
//   // text-decoration: none;
//   // position: relative;
//   .titleBox {
//     line-height: 40px;
//   }
// }
// .index {
//   padding: 0;
//   width: 100px;
// }
// .Btn {
//   transform: translateY(-50%);
//   position: absolute;
//   top: 50%;
//   left: 8%;
//   height: 38px;
// }
// .el-menu-item :hover {
//   color: #000;
// }
// .iconactive {
//   color: #717171;
// }
.el-dropdown {
  color: #fff !important;
}

.arrow {
  font-size: 16px;
  // color: #008cff;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #eff5f9;
  border-radius: 2px;
  transform: translateY(80%);
  // height: 84px;
  // line-height: 84px;
  // padding: 0 10px;
  cursor: pointer;
}

::deep .el-icon-arrow-right {
  margin-left: 20px;
}

::deep .el-icon-arrow-left {
  margin-right: 20px;
}

.menu {
  flex: 1;
  overflow: hidden;
  position: relative;

  .menu-list {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    transition: all 0.3s;

    // padding: 10px 0;
    .active-menu {
      background-color: #0071e1;
      border-bottom: 6px solid #004c97;
      box-sizing: border-box;
      // border-radius: 5px;
    }

    >div {
      display: inline-block;
      height: 84px;
      line-height: 84px;
      color: #fff;
      padding: 0 20px;
      cursor: pointer;
      transition: all 0.2s;
    }
  }
}

.aui-navbar__brand {
  justify-content: flex-start;

  .aui-navbar__brand-mini,
  .aui-navbar__brand-lg {
    width: 28%;
    font-size: 16px;
  }

  .aui-navbar__brand-mini {
    width: 100%;
    color: #fff;
  }
}

.icon-svg {
  margin-right: 5px;
}

.icon-menu-box {
  position: absolute;
  left: -15px;
  top: 11px;
  padding-left: 15px;
  height: 30px;
  // background-color: rgba(108, 166, 255, 0.5);
  width: 53px;
  border-radius: 0 5px 5px 0;
}

.aui-navbar__icon-menu--switch {
  z-index: 1;
  position: relative;
  color: #717171 !important;
  font-size: 20px !important;
}

.item {
  margin: 0px 10px 0px 15px;
  margin-top: 20px;
}

.el-icon-message-solid {
  font-size: 20px;
  color: #fff;
}

// [class^="el-icon-arrow-"] {
//   position: absolute;
//   top: 50%;
//   transform: translateY(-50%);
//   font-size: 30px;
//   padding: 10px 0;
//   background-color: #999;
//   cursor: pointer;
// }
</style>
